<template>
  <div class="task-progress-container">
    <h1 class="page-title">任务进度</h1>
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>
    <div v-else-if="error" class="error-container">
      <el-alert
        :title="error"
        type="error"
        show-icon
      />
    </div>
    <div v-else class="progress-content">
      <el-card class="task-info-card">
        <div class="task-header">
          <h2>{{ task.title }}</h2>
          <el-tag :type="getStatusType(task.status)">{{ task.status }}</el-tag>
        </div>
        <p class="task-description">{{ task.description }}</p>
        
        <div class="progress-section">
          <h3>整体进度</h3>
          <el-progress 
            :percentage="task.progressPercentage" 
            :status="task.progressPercentage === 100 ? 'success' : ''"
            :stroke-width="20"
          />
          <div class="progress-details">
            <div class="detail-item">
              <span class="label">开始日期：</span>
              <span class="value">{{ formatDate(task.startDate) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">截止日期：</span>
              <span class="value">{{ formatDate(task.dueDate) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">预计完成日期：</span>
              <span class="value">{{ formatDate(task.estimatedCompletionDate) }}</span>
            </div>
          </div>
        </div>

        <div class="milestones-section" v-if="task.milestones && task.milestones.length > 0">
          <h3>里程碑</h3>
          <el-timeline>
            <el-timeline-item
              v-for="(milestone, index) in task.milestones"
              :key="index"
              :timestamp="formatDate(milestone.date)"
              :type="getMilestoneType(milestone.status)"
            >
              <h4>{{ milestone.title }}</h4>
              <p>{{ milestone.description }}</p>
              <el-tag size="small" :type="getStatusType(milestone.status)">{{ milestone.status }}</el-tag>
            </el-timeline-item>
          </el-timeline>
        </div>

        <div class="subtasks-progress" v-if="task.subtasks && task.subtasks.length > 0">
          <h3>子任务进度</h3>
          <el-table :data="task.subtasks" style="width: 100%">
            <el-table-column prop="title" label="子任务" />
            <el-table-column prop="assignee" label="负责人" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="进度">
              <template #default="scope">
                <el-progress 
                  :percentage="scope.row.progressPercentage"
                  :status="scope.row.progressPercentage === 100 ? 'success' : ''"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'TaskProgress',
  setup() {
    const route = useRoute()
    const taskId = route.params.id
    const task = ref({})
    const loading = ref(true)
    const error = ref(null)

    const fetchTaskProgress = async () => {
      try {
        loading.value = true
        // 这里替换为实际的 API 调用
        // const response = await fetch(`/api/tasks/${taskId}/progress`)
        // task.value = await response.json()
        
        // 模拟数据
        setTimeout(() => {
          task.value = {
            id: taskId,
            title: '前端开发任务',
            description: '实现前端界面和交互功能',
            status: '进行中',
            startDate: '2024-05-01',
            dueDate: '2024-06-15',
            estimatedCompletionDate: '2024-06-10',
            progressPercentage: 65,
            milestones: [
              { title: '需求分析', description: '确认需求和设计方案', status: '已完成', date: '2024-05-05' },
              { title: '原型设计', description: '完成UI原型设计', status: '已完成', date: '2024-05-15' },
              { title: '核心功能实现', description: '实现核心功能模块', status: '进行中', date: '2024-05-30' },
              { title: '测试与优化', description: '进行测试和性能优化', status: '未开始', date: '2024-06-10' }
            ],
            subtasks: [
              { title: 'UI组件开发', assignee: '张三', status: '已完成', progressPercentage: 100 },
              { title: '路由配置', assignee: '李四', status: '已完成', progressPercentage: 100 },
              { title: '数据交互', assignee: '王五', status: '进行中', progressPercentage: 70 },
              { title: '单元测试', assignee: '赵六', status: '未开始', progressPercentage: 0 }
            ]
          }
          loading.value = false
        }, 1000)
      } catch (err) {
        error.value = '获取任务进度数据失败'
        loading.value = false
        console.error(err)
      }
    }

    const formatDate = (dateString) => {
      if (!dateString) return '-'
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    }

    const getStatusType = (status) => {
      switch (status) {
        case '已完成':
          return 'success'
        case '进行中':
          return 'primary'
        case '未开始':
          return 'info'
        case '延期':
          return 'warning'
        case '阻塞':
          return 'danger'
        default:
          return 'info'
      }
    }

    const getMilestoneType = (status) => {
      switch (status) {
        case '已完成':
          return 'success'
        case '进行中':
          return 'primary'
        case '未开始':
          return 'info'
        default:
          return 'info'
      }
    }

    onMounted(() => {
      fetchTaskProgress()
    })

    return {
      task,
      loading,
      error,
      formatDate,
      getStatusType,
      getMilestoneType
    }
  }
}
</script>

<style scoped>
.task-progress-container {
  padding: 20px;
}

.page-title {
  margin-bottom: 20px;
  font-size: 24px;
}

.task-info-card {
  margin-bottom: 20px;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.task-description {
  margin-bottom: 20px;
  color: #606266;
}

.progress-section {
  margin: 20px 0;
}

.progress-details {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.value {
  font-size: 16px;
  font-weight: 500;
}

.milestones-section,
.subtasks-progress {
  margin-top: 30px;
}

h3 {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 500;
}

.loading-container,
.error-container {
  margin: 30px 0;
}
</style> 